<style lang="less" scoped>
    @import "../../less/_variable.less";
    @import "../goods/css/specifications";

    .header {
        border-bottom: 1px solid #efefef;
    }

    .buying_info {
        background: #fff;
        .b_i_t {
            display: flex;
            align-items: center;
            align-content: center;
            padding: 0.31rem 0.3rem 0.2rem 0.3rem;
            .b_i_t_vatar {
                width: 0.84rem;
                height: 0.84rem;
                border-radius: 50%;
                background: #f7f7f7;
                margin-right: 0.2rem;
                overflow: hidden;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            div:last-child {
                color: #222222;

                font-size: 0.32rem;
                span:last-child {
                    display: block;
                    font-size: 0.24rem;
                    color: #909090;
                    margin-top: 0.1rem;
                }
            }
        }
        .b_i_c {
            padding: 0 0.2rem;
            margin-bottom: 0.3rem;
            .c_bg {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                width: 100%;
                height: 3.82rem;
                padding: 0.32rem 0.3rem 0;
                background: url("../../assets/img/buyingInfo_bg.png") no-repeat;
                background-size: 100% 100%;
                background-position: center;
                .c_avatar {
                    width: 2.2rem;
                    height: 2.2rem;
                    border-radius: 0.1rem;
                    background: #f7f7f7;
                    margin-right: 0.3rem;
                    overflow: hidden;
                    float: left;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
                .c_info {
                    position: relative;
                    flex: 1;
                    height: 2.2rem;
                    overflow: hidden;
                    font-size: 0.3rem;
                    color: #101010;
                    div:first-child {
                        display: -webkit-box;
                        /*! autoprefixer: off */
                        -webkit-box-orient: vertical;
                        /* autoprefixer: on */
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                        line-height: 1.5;
                    }
                    div:nth-child(2) {
                        margin-top: 0.6rem;
                        font-size: 0.32rem;
                        color: @c_buttonHoverBgColor;

                        span {
                            margin-right: 0.2rem;
                            font-size: 0.26rem;
                        }
                    }
                    div:last-child {
                        font-size: 0.26rem;
                        color: #555858;
                        position: absolute;
                        left: 0;
                        bottom: 0;
                        span:last-child {
                            margin-left: 0.16rem;
                            text-decoration: line-through;
                        }
                    }
                }
            }
            .c_bg_b {
                height: 0.8rem;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                span {
                    font-size: 0.26rem;
                    color: #525355;
                    margin-left: 0.1rem;
                }
            }
        }
    }

    .b_i_b {
        padding: 0 0.45rem 0.36rem;
        .l_t {
            display: flex;
            justify-content: center;
            align-items: center;
            align-content: center;
            font-size: 0.26rem;

            color: #222;
            p {
                margin-right: 0.2rem;
                em {
                    font-style: normal;
                    color: @c_buttonHoverBgColor;
                }
            }
        }
        .l_c {
            padding: 0.3rem 0;
            display: flex;
            justify-content: center;
            align-items: center;
            align-content: center;
        }
    }

    .day {
        background-color: #000;
        color: #fff;
        text-align: center;
        display: inline-block;
        padding: 6px 3px;
        border-radius: 3px;
        font-size: 0.3rem;
    }
</style>
<template>
    <div>
        <v-header title="拼单详情" :callback="callback" v-show="!share">
            <div slot="left">
                <div class="backs_icon"></div>
            </div>
            <!--<a slot="right" v-on:click="sharePages">-->
            <!--<div class="write_share_icon"></div>-->
            <!--</a>-->
        </v-header>
        <div v-show="share" class="share_alert" @click="comJS.openApp()">在App打开>></div>
        <div class="main_allScroll" :style="share ? {top: 0}: ''">
            <scroller :on-infinite="loadMore ? infinite: getDone" :on-refresh="refresh" ref="myscroller">

                <div class="buying_info">
                    <div class="b_i_t">
                        <div class="b_i_t_vatar">
                            <img :src="tuanzhang.userHeadImgUrl ? tuanzhang.userHeadImgUrl : 'https://files.shbs008.com/images/headImg/defaultHeadImg.png'" alt="">
                        </div>
                        <div>
                            <span>{{tuanzhang.userName}}</span>
                            <br>
                            <span>发起了{{good.leastCount}}人团</span>
                        </div>
                    </div>
                    <div class="b_i_c">
                        <div class="c_bg">
                            <div v-on:click="gotoInfo">
                                <div class="c_avatar">
                                    <img :src="good.mainImage" alt="">
                                </div>
                                <div class="c_info">
                                    <div>{{good.name}}</div>
                                    <div><span>{{good.leastCount}}人拼购价</span>￥{{good.minSellPrice?good.minSellPrice:good.price}}
                                    </div>
                                    <div><span>单买价</span><span>￥{{good.minOriginalPrice}}</span></div>
                                </div>
                            </div>
                            <div class="c_bg_b">
                                <div v-for="v in good.promiseInfoList"
                                     style="flex:1;display: flex;justify-content: flex-start;align-items: center; width: auto;white-space: nowrap">
                                    <div class="buying_waring"></div>
                                    <span>{{v.promiseDescribe}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="b_i_b">
                        <div class="l_t">
                            <p>还差<em>{{tuanzhang.restNeedNum == null? "0" : tuanzhang.restNeedNum }}人</em>拼购成功，剩余时间</p>
                            <clocker :time="comJS.clockerTime(tuanzhang.restTime || 0)">
                            <span class="day">%_H1</span>
                            <span class="day">%_H2</span> :
                            <span class="day">%_M1</span>
                            <span class="day">%_M2</span> :
                            <span class="day">%_S1</span>
                            <span class="day">%_S2</span>
                            </clocker>
                        </div>
                        <div class="l_c">
                            <div class="buying_av_s" v-for="info in displayAcquiredData"
                                 :class="info.isOwner?'active':''">
                                <img :src="info.userHeadImgUrl" alt="info.name">
                            </div>
                        </div>
                        <div class="l_b">
                            <button class="buying_btn"
                                    v-if="!isMe"
                                    :class="tuanzhang.restNeedNum == null ||  tuanzhang.restNeedNum <= 0 || isMe? 'disabled' : '' "
                                    :disabled="tuanzhang.restNeedNum == null ||  tuanzhang.restNeedNum <= 0 || isMe"
                                    v-on:click="gotoPage">{{tuanzhang.restNeedNum == null ||  tuanzhang.restNeedNum <= 0 ? '拼团结束': '我要参团'}}
                            </button>
                            <button class="buying_btn"
                                    v-else
                                    v-on:click="sharePages">邀请好友
                            </button>
                        </div>
                    </div>
                </div>
                <!--TODO 选择规格-->
                <div v-transfer-dom>
                    <popup v-model="show" style="background:#fff;height: 9.37rem;overflow-y: inherit"
                           :style="{bottom: interactive.statusBarHeight.tabBarHeight}">
                        <div class="popup0">
                            <div class="header_box">
                                <img v-lazy="{src:curGood.mainImage}" alt="">
                                <div class="prise">
                                    <h1>￥{{curGood.sellPrice}}</h1>
                                    <div class="color_model">
                                        <span>{{curGood.specificationOneVal}}</span>
                                        <span>{{curGood.specificationTwoVal}}</span>
                                        <span>{{curGood.specificationThreeVal}}</span>
                                    </div>
                                </div>
                                <div class="close" @click="closedown"></div>
                            </div>
                            <div class="content_box">
                                <div class="colors" v-for="(item, index) in Specifications" v-if="item.arr">
                                    <h3>{{item.title}}</h3>
                                    <div class="options">
                                <span v-for="(x,i) in item.arr" :class="[item.selected == i && item.isSelected.indexOf(x) > -1 ? 'bg_red' : '']"
                                      :id="item.isSelected.indexOf(x) > -1 ? '' : 'disabled'"
                                      @click="bg_color(item,index, i, x)">{{x}}</span>
                                    </div>
                                </div>
                                <div class="colors main_c_b_s_o">
                                    <group>
                                        <x-number v-model="buyNum" title="购买数量" :min="good.minimumCount" :max="good.limitCount"
                                                  fillable></x-number>
                                    </group>
                                </div>
                            </div>
                            <div class="footer_ok">
                                <button :disabled=" curGood == {} || buyNum == 0"
                                        :class="curGood == {} || buyNum== 0 ?'disabled':''"
                                        v-on:click="confirm">确定
                                </button>
                            </div>

                        </div>
                    </popup>
                </div>
                <v-recommmend @updateLoadMore="updateLoadMore" ref="recommend"></v-recommmend>
            </scroller>
        </div>

    </div>
</template>
<script>
    import {GET_HOMELIST} from "store/home";
    import {GET_PAYGOODS} from 'store/paygoods'
    import {mapActions, mapState} from 'vuex'
    import {Clocker, Popup, TransferDom, XNumber, Group} from 'vux'

    export default {
        components: {
            Clocker,
            Popup,
            XNumber,
            Group
        },
        directives: {
            TransferDom
        },
        data() {
            return {
                good: {},
                displayAcquiredData: [],
                tuanzhang: {},
                share: false,
                formShare: false,
                isMe: false,
                buyNum: 1,
                curGood: {},  // 当前选择的产品信息 需要存入模板
                show: false,
                Specifications: [],
                isload: false,
                loadMore: false,
            };
        },
        activated: function () {
            this.isMe = false
            this.good = {}
            this.displayAcquiredData = []
            this.tuanzhang = {}
            this.buyNum = 1
            this.curGood = {}
            this.show = false
            this.Specifications = []
            if (this.$route.query.sharePage && this.$route.query.sharePage == "1") {
                this.share = true
                localStorage.setItem('t', this.$route.query.token)
            } else if (this.$route.query.form && this.$route.query.form === 'share') {
                this.formShare = true
            } else {
                this.share = false
            }
            setTimeout(()=> this.getDisplayAcquired(),10)
            this.getProduct();
        },
        methods: {
            ...mapActions([GET_HOMELIST, GET_PAYGOODS]),
            updateLoadMore(data){
              this.loadMore = data
            },
            refresh(done){
                this.getDisplayAcquired()
                this.getProduct(done)
            },
            infinite(done){
                global.myLoad = true
                setTimeout(()=>{
                    this.$refs.recommend.getGoods(this.good.productInfo.parentCategory, done)
                },10)
            },
            getDone(done){
                this.$refs.myscroller.finishInfinite(2)
            },
            callback: function () {
                if (this.formShare) {
                    this.Interactive.activityWebDismiss();
                } else {
                    this.$router.goBack();
                }
            },
            //获取订单详情
            getProduct(done) {
                //获取商品详情
                this.$ajax.getGoodsDetail({goodsId: this.$route.query.templateId})
                    .then((res) => {
                        if(done){
                            done()
                        }
                        this.good = res.body.content;
                        this.good.mainImage = this.good.productInfo.mainImage
                        this.good.name = this.good.productInfo.name
                        var nameArr = ['specificationInfoOneName', 'specificationInfoTwoName', 'specificationInfoThreeName']
                        this.Specifications = []
                        nameArr.forEach((v, i) => {
                            var a = {}
                            a.title = res.body.content[v]
                            a.arr = res.body.content.skuInfo[v]
                            a.selected = 0
                            a.isSelected = []
                            this.Specifications.push(a)
                        })
                        this.$refs.recommend.getGoods(this.good.productInfo.parentCategory)
                    })
                    .then(() => {
                        this.curGoods(0)
                        this.buyNum = this.good.minimumCount;
                    })
            },
            //获取拼单列表
            getDisplayAcquired() {
                var req = {orderId: this.$route.query.orderId}
                // var reqToken = {orderId: this.$route.query.orderId, loginToken: this.$route.query.token, a: 1}
                this.$ajax.displayAcquired(req)
                    .then((res) => {
                        this.displayAcquired = res.body.content.unionBuyInfoVOList;
                        if (this.displayAcquired !== null && this.displayAcquired.length > 0) {
                            if (res.body.content.isJoined){
                                this.isMe = true
                            } else {
                                this.isMe = false
                            }
                            for (let i = 0; i < this.displayAcquired.length; i++) {
                                let obj = this.displayAcquired[i];
                                if (obj.isOwner) {
                                    this.tuanzhang = obj;
                                }
                            }
                        }
                    })
            },
            gotoPage() {  //  点击我要参团
                if (this.share) {
                    this.comJS.openApp()
                } else {
                    let token = this.comJS.getCookie('t')
                    if (token) {
                        this.show = true
                    } else {
                        this.Interactive.pushTokentoJS();
                    }

                }
            },
            gotoInfo(id) {  //  查看详情
                if (this.share) {
                    this.comJS.openApp()
                } else {
                    this.$router.push({
                        path: '/home/product_details',
                        query: {
                            type: 1,
                            templateId: this.$route.query.templateId
                        }
                    })
                }
            },
            //  选择颜色尺寸等规格
            bg_color: function (item, index, i, x) {
                if (item.isSelected.indexOf(x) > -1) {
                    item.selected = i;
                    this.curGoods(index)
                } else {
                    return
                }
            },
            closedown() {
                this.show = false
            },
            curGoods(type) {  //  遍历 查找到当前的产品
                this.Specifications.forEach((v) => {
                    v.isSelected = []
                })
                this.curGood = {}
                //  先便利找到
                var Marr = this.Specifications
                var nameArr = ['specificationOneVal', 'specificationTwoVal', 'specificationThreeVal']
                this.good.subTemplateInfoList.forEach((v) => {
                    //  寻找当前商品
                    if (!!Marr[0].arr && !!Marr[1].arr && !!Marr[2].arr) {   //  如果有三种规格
                        if (v.specificationOneVal == Marr[0].arr[Marr[0].selected] && v.specificationTwoVal == Marr[1].arr[Marr[1].selected] && v.specificationThreeVal == Marr[2].arr[Marr[2].selected]) {
                            this.curGood = v
                        }
                        //  寻找可点击
                        if (type === 0) {
                            this.IsCilckOne(v, 3)  //  点第一个
                        } else if (type === 1) {
                            this.IsCilckTwo(v, 3)  //  点第二个
                        } else if (type === 2) {
                            this.IsCilckThree(v, 3)  //  点第三个
                        }
                    } else if (!!Marr[0].arr && !!Marr[1].arr) {   //  如果有二种规格
                        if (v.specificationOneVal == Marr[0].arr[Marr[0].selected] && v.specificationTwoVal == Marr[1].arr[Marr[1].selected]) {
                            this.curGood = v
                        }
                        if (type === 0) {
                            this.IsCilckOne(v, 2)  //  点第一个
                        } else if (type === 1) {
                            this.IsCilckTwo(v, 2)  //  点第二个
                        }
                    } else if (!!Marr[0].arr) {    //  如果有1种规格
                        if (v.specificationOneVal == Marr[0].arr[Marr[0].selected]) {
                            this.curGood = v
                        }
                        this.IsCilckOne(v, 1)  //  3种规格
                    }
                })
                //  如果没有的处理逻辑
                if(!this.curGood.hasOwnProperty('mainImage')){
                    this.good.subTemplateInfoList.forEach((v,i) => {
                        if(!!Marr[0].arr && !!Marr[1].arr && !!Marr[2].arr){
                            //  如果没找到
                            var a, b;
                            if (type === 0) {
                                a = 1;
                                b = 2;
                            } else if (type === 1) {
                                a = 0;
                                b = 2;
                            } else if (type === 2) {
                                a = 0;
                                b = 1;
                            }
                            if (Marr[type].arr[Marr[type].selected] == v[nameArr[type]]) {
                                this.curGood = v
                                this.isSelected(a, v[nameArr[a]])
                                this.isSelected(b, v[nameArr[b]])
                            }
                        } else if(!!Marr[0].arr && !!Marr[1].arr){
                            var a;
                            if (type == 0) {
                                a = 1
                            } else {
                                a = 0
                            }
                            if (Marr[type].arr[Marr[type].selected] == v[nameArr[type]]) {
                                this.curGood = v
                                this.isSelected(a, v[nameArr[a]])
                            }
                        }
                    })
                }
                this.setCurGood()
            },
            setCurGood(){
                this.curGood.templateId = this.$route.query.templateId
                this.curGood.name = this.good.productInfo.name
                this.curGood.detail = this.good.detail
                this.curGood.limitCount = this.good.limitCount // 最大可买
                this.curGood.minimumCount = this.good.minimumCount // 最大可买
                this.curGood.leastCount = this.good.leastCount
                this.curGood.type = this.good.type
                this.curGood.restNeedNum = this.tuanzhang.restNeedNum
            },
            IsCilckOne(v, num) {
                var Marr = this.Specifications
                //  寻找第一个不能点击
                this.Specifications[0].arr.forEach((value) => {
                    if (value == v.specificationOneVal) {
                        this.Specifications[0].isSelected.push(value)
                    }
                })
                if (num > 1) {
                    //  寻找第二个不能点击
                    this.Specifications[1].arr.forEach((value) => {
                        if (v.specificationOneVal == Marr[0].arr[Marr[0].selected] && value == v.specificationTwoVal) {
                            this.Specifications[1].isSelected.push(value)
                        }
                    })
                }
                if (num > 2) {
                    //  寻找第三个不能点击
                    this.Specifications[2].arr.forEach((value) => {
                        if (v.specificationTwoVal == Marr[1].arr[Marr[1].selected] && v.specificationOneVal == Marr[0].arr[Marr[0].selected] && value == v.specificationThreeVal) {
                            this.Specifications[2].isSelected.push(value)
                        }
                    })
                }
            },
            IsCilckTwo(v, num) {
                //  根据num  判断有几种规格
                var Marr = this.Specifications
                //  寻找第二个不能点击
                this.Specifications[1].arr.forEach((value) => {
                    if (value == v.specificationTwoVal) {
                        this.Specifications[1].isSelected.push(value)
                    }
                })
                if (num > 1) {
                    //  寻找第一个不能点击
                    this.Specifications[0].arr.forEach((value) => {
                        if (v.specificationTwoVal == Marr[1].arr[Marr[1].selected] && value == v.specificationOneVal) {
                            console.log(value)
                            this.Specifications[0].isSelected.push(value)
                        }
                    })
                }
                if (num > 2) {
                    //  寻找第三个不能点击
                    this.Specifications[2].arr.forEach((value) => {
                        if (v.specificationTwoVal == Marr[1].arr[Marr[1].selected] && v.specificationOneVal == Marr[0].arr[Marr[0].selected] && value == v.specificationThreeVal) {
                            this.Specifications[2].isSelected.push(value)
                        }
                    })
                }
            },
            IsCilckThree(v, num) {
                //  根据num  判断有几种规格
                var Marr = this.Specifications
                //  寻找第三个不能点击
                this.Specifications[2].arr.forEach((value) => {
                    if (value == v.specificationThreeVal) {
                        this.Specifications[2].isSelected.push(value)
                    }
                })
                if (num > 1) {
                    //  寻找第三个不能点击
                    this.Specifications[0].arr.forEach((value) => {
                        if (v.specificationThreeVal == Marr[2].arr[Marr[2].selected] && value == v.specificationOneVal) {
                            this.Specifications[0].isSelected.push(value)
                        }
                    })
                }
                if (num > 2) {
                    //  寻找第二个不能点击
                    this.Specifications[1].arr.forEach((value) => {
                        if (v.specificationThreeVal == Marr[2].arr[Marr[2].selected] && v.specificationOneVal == Marr[0].arr[Marr[0].selected] && value == v.specificationTwoVal) {
                            this.Specifications[1].isSelected.push(value)
                        }
                    })
                }
            },
            isSelected(a, data) {  //根据规格 确定选中值
                this.Specifications[a].arr.forEach((value, index) => {
                    if (value == data) {
                        this.Specifications[a].selected = index
                    }
                })
            },
            confirm() {
                var a = this.curGood
                a.buyNum = this.buyNum
                a.inviteCode = this.$route.query.inviteCode || null
                this.GET_PAYGOODS([a])
                this.$router.push({
                    path: '/home/collage_subOrder',
                    query: {type: this.curGood.type, orderId: this.$route.query.orderId}
                })
            },
            sharePages() {
                let obj = {
                    "title": "【仅剩" + this.tuanzhang.restNeedNum + "个名额】" + "【￥" + (this.good.minSellPrice != null ? this.good.minSellPrice : this.good.price) + "】" + this.good.name,
                    "content": "我在铺连铺发起了一个拼单，赶快来参与一下吧！",
                    "imageUrl": this.good.mainImage,
                    "shareUrl": this.comJS.addSharePageUrl(window.location.origin + "/#/collage/join?templateId=" + this.good.templateId + "&orderId=" + this.$route.query.orderId+ "&token="+ localStorage.getItem('t')),
                    "originalPage": 'pages/goods/spell/spellListDetail?goodsId=' + this.good.templateId + '&orderId=' + this.$route.query.orderId + '&inviteCode=' + localStorage.getItem('inviteCode') + '&loginToken=' + localStorage.getItem('t') + '&form=share'
                }
                this.Interactive.shareClick(obj);
            },
        },
        computed: mapState({user: state => state.user, interactive: state => state.interactive}),


    }
</script>